<template>
  <div id="main" ref="EcharRef" class="monitorContainer"/>
</template>
<script setup>
import {nextTick, onMounted, ref, watch} from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  allDateArr: {
    type: Array,
    default: () => [],
  },
  allTimeArr: {
    type: Array,
    default: () => [],
  },
  tabActive: {
    type: Number,
    default: 0,
  },
  baseData: {
    type: Object,
    default: () => {
    },
  },
});

const EcharRef = ref(null);
const objData = ref([]);
const baseTime = ref([]);

watch(props, (val) => {
  objData.value = val.baseData;
  console.log(objData.value);
  setOption();
});

onMounted(() => {
  setOption();
});

const setOption = () => {
  const chartDom = document.getElementById('main');
  const myChart = echarts.init(chartDom);
  let option = null;
  nextTick(() => {
    const rawData = [
      [50, 45, 40, 35, 30],
      [20, 25, 25, 25, 20],
      [15, 15, 20, 20, 20],
      [10, 10, 10, 15, 20],
      [5, 5, 5, 5, 10],
    ];
    const totalData = [];
    for (let i = 0; i < rawData[0].length; ++i) {
      let sum = 0;
      for (let j = 0; j < rawData.length; ++j) {
        sum += rawData[j][i];
      }
      totalData.push(sum);
    }
    const grid = {
      left: 100,
      right: 100,
      top: 50,
      bottom: 50,
    };
    const ageData = ['50岁-', '60岁', '70岁', '80岁', '90岁+'];
    let age = objData.value.age;
    let newAge = '';
    if (age > 50 && age <= 55) {
      newAge = '50岁-';
    } else if (age > 55 && age <= 65) {
      newAge = '60岁';
    } else if (age > 65 && age <= 75) {
      newAge = '70岁';
    } else if (age > 75 && age <= 85) {
      newAge = '80岁';
    } else {
      newAge = '90岁';
    }
    let ageIndex = ageData.findIndex(function (element) {
      return element === newAge;
    });
    const healthScore = Number(objData.value.healthScore) / 100;
    console.log(healthScore);
    const series = ['健康', '提示', '风险', '危险', '严重危险'].map(
        (name, sid) => {
          return {
            name,
            type: 'bar',
            stack: 'total',
            barWidth: '20%',
            label: {
              show: false,
              formatter: (params) => Math.round(params.value * 1000) / 10 + '%',
            },
            data: rawData[sid].map((d, did) =>
                totalData[did] <= 0 ? 0 : d / totalData[did]
            ),
            markPoint:
                sid === ageIndex
                    ? {
                      data: [
                        {
                          type: 'max',
                          name: 'Max',
                          symbol: 'circle',
                          symbolSize: 10,
                          value: '当前位置',
                          coord: [newAge, healthScore],
                          label: {
                            show: true,
                            position: 'top',
                          },
                          itemStyle: {color: '#8e0606'},
                        },
                      ],
                    }
                    : {},
          };
        }
    );

    const option = {
      title: {
        text: '不同年龄人群健康指数分布',
        left: 'center',
      },
      color: ['#57c227', '#fbcf00', '#fea102', '#fe464d', '#537cfe'],
      legend: {
        x: 'center',
        y: 'bottom',
        selectedMode: false,
      },
      grid,
      yAxis: {
        type: 'value',
      },
      xAxis: {
        type: 'category',
        data: ageData,
      },
      series,
    };

    myChart.setOption(option);
  });
};
</script>
